<template>
  <div class="page white-stage">
    <div class="container activities-main">
      <h3 class="indicator">请选择要下发给客户的H5页面：</h3>
      <div style="top:44px" class="pdscroll" :class="{'none':!activities.length}" :on-infinite="load" :on-refresh="refresh" ref="my_scroller" :noDataText="noDataText">
        <ul class="activities-list">
          <li v-for="(activity, index) in activities" :key="index">
            <router-link class="activity-item" to="/client-detail">
              <div class="activity-related">
                <div class="full-height">
                <div class="activity-title">主管：{{ activity.title}}</div>
                <div class="activity-content">{{ activity.content}}</div>
                <div class="activity-lastmodified">最后修改时间：{{ activity.lastmodified }}</div>
                </div>
              </div>
              <div class="activity-img"><img :src="activity.img" /></div>

            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  // import Scroller from 'vue-scroller'
  import store from '../store';

  export default{
    data () {
     return {
       page_size : 15,
       page_index: 1,
       noDataText:'',
       originNoDataText:'暂无数据',
       activities:[
        // {
        // title: '春季班体验课活动',
        // content: '课前先体验，报名更放心！',
        // lastmodified: '2017-03-08 16:28',
        // img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4164049231,3397762674&fm=23&gp=0.jpg'
        // },
        //
        // {
        // title: '春季班体验课活动',
        // content: '课前先体验，报名更放心！',
        // lastmodified: '2017-03-08 16:28',
        // img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4164049231,3397762674&fm=23&gp=0.jpg'
        // },
        //
        // {
        // title: '春季班体验课活动',
        // content: '课前先体验，报名更放心！',
        // lastmodified: '2017-03-08 16:28',
        // img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4164049231,3397762674&fm=23&gp=0.jpg'
        // },
       ]
     }
    },

    methods: {

      refresh (iscroll) {
        console.log('refresh')
        this.getActivities();
      // Refresh current data
      },

      log () {
        console.log('ee');
      },

      load (iscroll) {
        this.getActivities();
        // Load new data
      },

      getActivities (data) {
        let defaultData = {} ;
        let that = this;

        defaultData['custom_type'] = this.custom_type;
        defaultData['page_size'] = this.page_size;
        defaultData['page_index'] = this.page_index;
        defaultData['order_by'] = 0;

        data = Object.assign(defaultData, data);

        console.log('getActivities JSON.stringify(data)', JSON.stringify(data));

        store.dispatch('getActivities', data).then((response) => {
          if(response.data.errcode == 0) {
            console.debug('response.data.results.data', response.data.results.data);
            setTimeout(() => {

              that.activities = that.activities.concat(response.data.results.data);

              setTimeout(() => {
                if (that.$refs.my_scroller) {
                  that.$refs.my_scroller.finishInfinite(true);
                  that.$refs.my_scroller.finishPullToRefresh();
                  that.$refs.my_scroller.resize();
                }
              }, 300)

              that.page_index++

              if(that.activities.length > 0) {
                that.noDataText = ''
              }
            }, 300)

            if(that.activities.length) {
              that.noDataText = '';
            }
          } else {
            console.debug('系统服务异常！请联系管理员!', response.data.errmsg);
          }
        }).catch(function(error){
          console.debug('系统服务异常！请联系管理员!', error);
        })
      }
    },

    components:{
      // Scroller
    },
    mounted () {
      this.callJsApi('biz.navigation.setTitle',{title:'H5营销页'});
    }
  }
</script>

<style lang="less">
  @import '../less/index.less';

  @image-size: 100px;

  .activities-main{
    padding: 10px;

    .indicator{
    font-size: 14px;
    color: rgb(116, 116, 116);
    font-weight: normal;
    padding:10px 0 0;
    }

    .activity-item{
    &:extend(.clearfix all);
    margin: 10px auto;
    display: block;
    border:1px solid rgb(178, 178, 178);
    padding: 5px;
    border-radius: 4px;
    }

    .activity-related{
    float: left;
    height:@image-size;
    position: relative;
    min-width: 60%;
    }

    .activity-img{
    float: right;

    width: @image-size;
    height: @image-size;

    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    }

    .activity-title{
    color: #333;
    font-weight: 15px;
    }


    .activity-content{
      color: rgb(116, 116, 116);
      font-size:14px;
    }

    .activity-lastmodified{
      color: rgb(116, 116, 116);
      font-size: 13px;
      position: absolute;
      left:0;
      bottom: 0;
    }

    .full-height{
    height: 100%;
    }
  }
</style>
